<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/Public/css/bootstrap.min.css" rel="stylesheet">
    <script src="/Public/js/jquery-1.11.1.min.js"></script>
    <script src="/lianxi/app.js"></script>
    <script src="/Public/js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>
<!------------------------------------登录开始------------------------------------->
<div style="width: 30%;margin: auto;margin-top: 100px;" id="login">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-user"></span>
            <span>登录</span>
        </div>
        <form class="form-horizontal" id="loginform">
            <div class="panel-body" id="loginpanelbody">
                    <div class="form-group">
                        <label class="control-label col-xs-2">登录名</label>
                        <div class="col-xs-9">
                            <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-user"></span>
                                    </span>
                                <input type="text" class="form-control" name="name" >
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-2">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                        <div class="col-xs-9">
                            <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                                <input type="password" class="form-control" name="password">
                            </div>
                        </div>
                    </div>
            </div>
            <div class="panel-footer">
                <button type="button" class="btn btn-primary pull-right" id="loginbutton">登录</button>
                <button type="button" class="btn btn-danger pull-right" id="registeredbutton">注册</button>
                <div class="clearfix"></div>
            </div>
        </form>
    </div>
</div>
<!------------------------------------登录结束------------------------------------->

<!------------------------------------注册开始------------------------------------->
<div style="width: 30%;margin: auto;margin-top: 100px;display: none;" id="registered">
    <div class="panel panel-success">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-user"></span>
            <span>注册</span>
        </div>
        <form class="form-horizontal" id="registeredform">
            <div class="panel-body" id="registeredpanelbody">
                <div class="alert  alert-success" id="success" style="display: none">注册成功！<button class="close" data-dismiss="alert">&times;</button></div>
                <div class="form-group">
                    <label class="control-label col-xs-2">账号</label>
                    <div class="col-xs-9">
                        <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-user"></span>
                                    </span>
                            <input type="text" class="form-control" name="name" >
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <div class="col-xs-9">
                        <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-lock"></span>
                                    </span>
                            <input type="password" class="form-control" name="password">
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <button type="button" class="btn btn-success pull-right" id="confirmregisteredbutton">确定</button>
                <button type="button" class="btn btn-default pull-right" id="returnbutton">返回</button>
                <div class="clearfix"></div>
            </div>
        </form>
    </div>
</div>
<!------------------------------------注册开始------------------------------------->
<script>
    var loginform=$('#loginform');//登录的form
    var login=$("#login");//登录界面
    var loginpanelbody = $('#loginpanelbody');//登录的panel
    var loginbutton=$('#loginbutton');//登录界面的登录按钮
    var registeredbutton=$('#registeredbutton');//登录界面的注册按钮

    var registered = $('#registered');//注册界面
    var registeredform = $('#registeredform');//注册的form
    var registeredpanelbody = $('#registeredpanelbody');//注册的panel
    var confirmregisteredbutton=$('#confirmregisteredbutton');//注册的确定按钮
    var returnbutton = $('#returnbutton');//注册的返回按钮
    var success = $('#success');//注册成功提示

    loginbutton.click(function(){
        $.post('{:U("Xm/login")}',loginform.serialize(),function(resp){
            if(resp.status){
                location = '{:U("Xm/xinwen")}';
            }else {
                loginpanelbody.showAlert(resp.message);
            }
        },'json');
    });

    registeredbutton.click(function(){
        login.hide();
        registered.show();
    });

    confirmregisteredbutton.click(function(){
        $.post('{:U("Xm/registered")}',registeredform.serialize(),function(resp){
            if(resp.status){
                success.show();
                setTimeout(function(){
                    success.hide();
                },1000)
            }else {
                registeredpanelbody.showAlert(resp.message);
            }
        },'json');
    });

    returnbutton.click(function(){
        login.show();
        registered.hide();
    })

</script>
</body>
</html>